Code Playground

html {
  overflow: hidden;
  background: #333;
}

body {
  margin: 0;
  height: 100vh;
  perspective: 125vmin;
  -webkit-filter: drop-shadow(-1vmin 1vmin 1vmin #000);
}

div {
  position: absolute;
  transform-style: preserve-3d;
}

.assembly {
  top: 50%;
  left: calc(50% - .5*var(--dx)*85vmin);
  transform: rotatey(35deg);
}

.panel {
  --mid: calc((var(--p) + var(--k)*0.25)*85vmin);
  transform: translate3d(calc(var(--dx)*85vmin), 0, calc(var(--dz)*85vmin));
}
.panel:before, .panel:after {
  position: absolute;
  margin: -32.5vmin -42.5vmin;
  width: 85vmin;
  height: 65vmin;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/bg_sq_halloween_0.jpg") 50%/cover;
  content: "";
}
.panel:before {
  transform-origin: var(--mid);
  transform: rotatey(-90deg);
  -webkit-clip-path: inset(0 calc(100% - var(--mid)) 0 calc(var(--p)*100%));
          clip-path: inset(0 calc(100% - var(--mid)) 0 calc(var(--p)*100%));
  filter: brightness(0.4);
}
.panel:after {
  -webkit-clip-path: inset(0 calc(100% - (var(--p) + var(--k))*85vmin) 0 var(--mid));
          clip-path: inset(0 calc(100% - (var(--p) + var(--k))*85vmin) 0 var(--mid));
}

Frontend Forever App